//导入axios
import axios from 'axios';

//使用useEffect和useState
import { useEffect, useState } from 'react';

//引入echarts图表
import DROne from './DS_echarts/DS_One';
import DRTwo from './DS_echarts/DS_Two';

import '../RevenueDataSheet/RevenueDataSheet.css';

export default function DispensaryStats() {
    const [data, setData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            try {
                //左侧医院排班表
                const response = await axios.get('http://8.148.7.123:8000/infomationcenter/revenue');
                setData(response.data.data.table); // 将API响应数据存储到state中
                console.log(response.data.data.table);
            } catch (error) {
                console.error('Error fetching data: ', error);
            }
        };

        fetchData();
    }, []); // 空依赖数组确保仅在组件加载时运行

    return <div className="body">
        <div className="body_top">
            <div className="body_top_left">
                <DROne></DROne>
            </div>
            <div className="body_top_right">
                <DRTwo></DRTwo>
            </div>
        </div>
        <div className="body_bottom">
            <h3>详细数据</h3>
            <div className='body_bottom_title'>
                <div>住院部</div>
                <div>本周服务医务数</div>
                <div>金额</div>
                <div>上周金额</div>
                <div>本月金额</div>
                <div>审计人员</div>
                <div>负责人</div>
            </div>
            {data && data.map(item => (
                <div className='body_bottom_main' key={item.server}>
                    <div>{item.name}</div>
                    <div>{item.server}</div>
                    <div>{item.money}</div>
                    <div>{item.lastweek}</div>
                    <div>{item.month}</div>
                    <div>{item.audit}</div>
                    <div>{item.chargeperson}</div>
                </div>
            ))}
        </div>
    </div>
}